import React from 'react';
import ReactDOM from 'react-dom';
import {actions,connect} from 'mirrorx';

import { FormattedMessage} from 'react-intl';


class App extends React.Component { 
	constructor(props) {
		super(props);
		this.state = {
			billDetailInfo:{}
		}	
	}

	componentDidMount(){						
		T.fetch({					
			url: "/bill//payment/detail/"+T.urlQuery("renewalOrderNo")+".json"+"?renewalStatus="+T.urlQuery("renewalStatus"),
			data: {},
			}).then((res) => {
				console.log(res)
				if (res.success) {
					this.setState({
						billDetailInfo: res.value
					})													
				}
		}); 
    }
	policyDetail=(policyNo) =>{//跳转到保单详情		 
		actions.routing.push({
            pathname: 'policy-detail',
            search: "?policyNo=" + policyNo
        })
	}

	render() {
		const Lang = window.LangMessage ||{};
		const {billDetailInfo} = this.state		
		return (<div className="bill-detail">		
		   <div className="flex flex-between">
				<div><FormattedMessage id='policy_order_name' defaultMessage='保单名称'/></div><div>{billDetailInfo.packageName}</div>
			</div>
			<div className="flex flex-between">
				<div><FormattedMessage id='policy_no' defaultMessage='保单号'/></div><div className="diy_color" onClick={()=>this.policyDetail(billDetailInfo.policyNo)}>{billDetailInfo.policyNo}</div>
			</div>
			<div className="flex flex-between">
				<div><FormattedMessage id='renew_date' defaultMessage='续期应缴日'/></div><div>{billDetailInfo.dueDate}</div>
			</div>
			{billDetailInfo.payMethod &&
				<div className="flex flex-between">
					<div><FormattedMessage id='pay_method' defaultMessage='付款方式'/></div><div>{billDetailInfo.payMethod}</div>
				</div>
			}			
			<div className="flex flex-between">
				<div><FormattedMessage id='pay_bill_status' defaultMessage='缴费状态'/></div>
				<div>{T.urlQuery("renewalStatus") == 1  ? Lang.no_pay_bill || '未缴费' : Lang.yes_pay_bill || '已缴费'}</div>
			</div>
			{billDetailInfo.payDate &&
				<div className="flex flex-between">
					<div><FormattedMessage id='pay_date' defaultMessage='缴费时间'/></div><div>{billDetailInfo.payDate}</div>
				</div>
			}
			{billDetailInfo.payNo &&
				<div className="flex flex-between">
					<div><FormattedMessage id='running_no' defaultMessage='交易流水号'/></div><div>{billDetailInfo.payNo}</div>
				</div>
			}
			
	  	</div>)
	}
}

export default App;